<template>
  <div class="product-library-detail">
    <PiTree
      ref="treeRef"
      :data="treeData"
      class="left"
      :props="{
        label: 'name',
        children: 'children',
      }"
      :show-checkbox="false"
      :expand-on-click-node="false"
      node-key="oid"
      @node-click="nodeClick"
    >
      <template #icon>
        <el-icon color="var(--el-color-primary)">
          <Folder></Folder>
        </el-icon>
      </template>
    </PiTree>
    <MoveLine left="300px" height="calc(100% - 56px)"></MoveLine>
    <div class="right">
      <PiTable
        isSearch
        rowKey="oid"
        :loading
        :tableData
        :tableColumns
        :pagination="page"
        :settingColumns
        @searchTable="getFolderContent"
        @pageChange="pageChange"
        @confirmSetting="getFolderContent"
      >
        <!-- <template #tableHeader>
          <el-space>
            <el-button type="primary">新建</el-button>
          </el-space>
        </template> -->
        <template #icon="{ row }">
          <DefaultIcon :oid="row.oid"></DefaultIcon>
        </template>
        <template #name="{ row }">
          <el-link type="primary" @click="openFolder(row)">{{ row.name }}</el-link>
        </template>
        <template #number="{ row }">
          <el-link type="primary" @click="toDetail(row)">{{ row.number }}</el-link>
        </template>
        <template #lifecycleState="{ row }">
          {{ row.lifecycleState.display }}
        </template>
        <template #createTime="{ row }">
          {{ row.createTime && $timeFormat(new Date(row.createTime), 'YYYY-MM-DD HH:mm:ss') }}
        </template>
        <template #handle="{ row }">
          <el-space>
            <el-link type="primary" @click="changeTableData(row)">编辑</el-link>
            <el-link type="danger">删除</el-link>
          </el-space>
        </template>
      </PiTable>
    </div>
  </div>
</template>

<script setup>
import MoveLine from '@/components/MoveLine/MoveLine.vue';
import { WTFOLDER } from '@/constant/table';
const route = useRoute();
const router = useRouter();
const loading = ref(false);
const tableData = ref([]);
const treeData = ref([]);
const { $timeFormat } = window.$fn;
const { productLibraryApi } = window.$api;
const settingColumns = {
  getColumns: productLibraryApi.setFolderContentColumns, //获取表头接口
  getColumnsParams: WTFOLDER, //接口入参
  setColumns: productLibraryApi.saveFolderContentColumns, //保存设置的表头接口
  setColumnsParams: WTFOLDER, //接口入参
};
const page = reactive({
  pageNum: 1, //当前页
  pageSize: 10, //每页数
  total: 0, //数据总量
});
const tableColumns = ref([]);
const treeRef = ref(null);
const oid = computed(() => {
  return route.query.oid;
});
const folderOid = computed(() => {
  return route.query.folderOid;
});
onMounted(() => {
  getFolderTree();
});
watch(
  () => folderOid.value,
  (val) => {
    if (val) {
      val && getFolderContent(val);
    }
  },
);
const getFolderTree = () => {
  productLibraryApi
    .getFolderTree({
      tableID: 'PDMProductFolderTreeTable',
      oid: oid.value,
    })
    .then((res) => {
      treeData.value = res.data.rows;
      return res.data.rows;
    })
    .then((res) => {
      if (!folderOid.value) {
        const defaultFolder = res?.[0];
        router.replace({
          name: route.name,
          query: {
            ...route.query,
            folderOid: defaultFolder.oid,
          },
        });
      } else {
        getFolderContent();
      }
    });
};
const getFolderContent = async (oid) => {
  loading.value = true;
  const params = {
    tableID: 'PDMFolderContentTable',
    oid: folderOid.value || oid,
    page: page.pageNum,
    range: page.pageSize,
  };
  treeRef.value?.treeRef?.setCurrentKey({ oid: params.oid });
  productLibraryApi
    .getFolderContent(params)
    .then((res) => {
      tableColumns.value = [
        {
          prop: 'icon',
          label: '',
          width: 40,
        },
        ...res.data.columns.map((item) => ({
          ...item,
          sortable: true,
        })),
      ];
      tableData.value = res.data.rows;
      page.total = res.data.total;
    })
    .finally(() => {
      loading.value = false;
    });
};
const nodeClick = (row) => {
  router.replace({
    name: route.name,
    query: {
      ...route.query,
      folderOid: row.oid,
    },
  });
};
const openFolder = (row) => {
  if (row.oid.includes('folder')) {
    nodeClick(row);
    treeRef.value.treeRef.setCurrentKey(row.oid);
  } else {
    const obj = [
      { type: 'WTDocument', name: 'documentDetail' },
      { type: 'EPMDocument', name: 'cadDocumentDetail' },
      { type: 'WTPart', name: 'partDetail' },
      { type: 'folder', name: 'productLibraryDetail' },
    ];
    const curr = obj.find((item) => row.oid.includes(item.type));
    router.push({
      name: curr.name,
      query: {
        oid: row.oid,
      },
    });
  }
};
const pageChange = (pageNum, pageSize) => {
  page.pageNum = pageNum;
  page.pageSize = pageSize;
  getFolderContent();
};
</script>

<style scoped lang="less">
.product-library-detail {
  position: relative;
  display: flex;
  padding: 10px;
  box-sizing: border-box;
  height: 100%;
  background-color: var(--el-bg-color);
  .left {
    width: 280px;
    flex-shrink: 0;
    margin-right: 20px;
  }
  .right {
    flex: auto;
    overflow-x: auto;
  }
}
</style>
